<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="searchList">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom">
          <div class="searchBox">
            <template v-for="(item, index) in state.totalInputColumns"
                      :key="index">
              <el-form-item v-if="item.type == 'input'">
                <el-input v-model="state.params[item.key]"
                          clearable
                          :placeholder="item.label"></el-input>
              </el-form-item>
              <el-form-item v-if="item.type == 'select'">

                <el-cascader v-model="state.params[item.key]"
                             :options="state.propsCity"
                             :props="state.props"
                             :placeholder="item.label"
                             clearable
                             v-if="item.key == 'cityArr'" />
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'positionTypeId'">
                  <el-option v-for="i in state.totalInputColumnsOption.positionType"
                             :key="i"
                             :label="i.dictValue"
                             :value="i.id" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="item.type == 'time'">
                <el-date-picker v-model="state.params[item.key]"
                                type="date"
                                value-format="YYYY-MM-DD"
                                :placeholder="item.label" />
              </el-form-item>
            </template>
          </div>

          <el-form-item class="btns">
            <el-button v-preventReClick
                       type="primary"
                       @click="methods.handleAction('export')"
                       v-permission="1092">导出</el-button>
            <el-button v-preventReClick
                       type="primary"
                       plain
                       @click="methods.handleAction('query')">搜索</el-button>
            <el-button v-preventReClick
                       @click="methods.handleAction('reset')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tabaleBox">
        <el-table :data="state.tableData"
                  style="width: 100%"
                  border
                  v-loading="state.loading"
                  :header-cell-style="{color:'#000'}">
          <el-table-column prop="time"
                           label="注册时间"
                           show-overflow-tooltip
                           align="center"
                           width="180">
            <template #default="scope">
              {{scope.row.createdAt ? $dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') :'' }}
            </template>
          </el-table-column>
          <el-table-column prop="name"
                           label="姓名/昵称"
                           show-overflow-tooltip
                           align="center"
                           width="100" />
          <el-table-column prop="sex"
                           label="性别"
                           show-overflow-tooltip
                           align="center"
                           width="90">
            <template #default="scope">

              <span v-if="scope.row.sex == 1">女</span>
              <span v-if="scope.row.sex == 2">男</span>
            </template>
          </el-table-column>
          <el-table-column prop="age"
                           label="年龄"
                           show-overflow-tooltip
                           align="center"
                           width="90" />
          <el-table-column prop="phone"
                           label="手机号"
                           show-overflow-tooltip
                           align="center"
                           width="160" />
          <el-table-column prop="city"
                           label="所在城市"
                           show-overflow-tooltip
                           align="center"
                           min-width="100">
            <template #default="scope">
              {{ scope.row.resideCityId }} {{ scope.row.resideAreaId }}
            </template>
          </el-table-column>
          <el-table-column prop="workExperience"
                           label="工龄"
                           show-overflow-tooltip
                           align="center"
                           width="120" />
          <el-table-column prop="revenue"
                           label="期望薪资"
                           show-overflow-tooltip
                           align="center"
                           width="100">
            <template #default="scope">
              {{ scope.row.salaryStart }} - {{  scope.row.salaryEnd }}
            </template>
          </el-table-column>
          <el-table-column prop="type"
                           label="当前状态"
                           show-overflow-tooltip
                           align="center"
                           width="100">
            <template #default="scope">
              <span v-if="scope.row.type === 0"
                    class="warning">游客</span>
              <span v-if="scope.row.type == 1"
                    class="success">普通用户</span>
              <span v-if="scope.row.type == 2"
                    class="primary">会员用户</span>
              <span v-if="scope.row.type == 3"
                    class="error">创客用户</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount"
                           label="总收益"
                           show-overflow-tooltip
                           align="center"
                           width="100" />
          <el-table-column prop="withdrawableBalance"
                           label="可提现余额"
                           width="100"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="inviteNum"
                           label="邀请用户数（一级）"
                           width="160"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="deleted"
                           label="禁用/启用"
                           width="100"
                           show-overflow-tooltip
                           align="center">
            <template #default='scope'>

              <div v-if="scope.row.deleted == 0"
                   class="primary">启用</div>
              <div v-if="scope.row.deleted == 1"
                   class="error">禁用</div>
            </template>
          </el-table-column>
          <el-table-column prop="btns"
                           label="操作"
                           show-overflow-tooltip
                           align="center"
                           width="160"
                           fixed="right">
            <template #default="scope">
              <div class="flex_c btnsDatil">
                <div @click="methods.handleAction('detail',scope.row)"
                     v-permission="1093">查看详情</div>
                <div class="ml14"
                     @click="methods.handleAction('QY',scope.row)"
                     v-if="scope.row.deleted == 1"
                     v-permission="1094">启用</div>
                <!-- <div class="ml14 error"
                     @click="methods.handleAction('JY',scope.row)"
                     v-if="scope.row.deleted == 0">禁用</div> -->
                <div class="ml14 error"
                     @click="methods.handleAction('PC',scope.row)"
                     v-if="scope.row.deleted == 0"
                     v-permission="1095">排除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div>
      <el-drawer v-model="state.dialogVisible"
                 title="查看资料"
                 :direction="direction"
                 :before-close="handleClose"
                 size="35%">
        <div class="drawerConcent">
          <div class="title">基础信息 &emsp;<span class="error fb">(距下级下放公海池还有：{{state.drawerData.putUserSeaDay}}天)</span></div>
          <div class="flex_sb">
            <el-input class="inputShow"
                      v-model="state.drawerData.userName"
                      disabled>
              <template #prepend>&emsp;&nbsp; 姓 &nbsp; 名 &nbsp;</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.age"
                      disabled>
              <template #prepend>&emsp;&nbsp; 年 &nbsp; 龄 &nbsp;</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.resideCity"
                      disabled>
              <template #prepend>&emsp;所在城市</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.workExperience"
                      disabled>
              <template #prepend>&emsp;&nbsp; 工 &nbsp; 龄 &nbsp;</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.workCompany"
                      disabled>
              <template #prepend>&emsp;就职企业</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.status"
                      disabled>
              <template #prepend>&emsp;当前状态</template>
            </el-input>

            <el-input class="inputShow"
                      v-model="state.drawerData.phone"
                      disabled>
              <template #prepend>&emsp;联系电话</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.fatherUser"
                      disabled>
              <template #prepend>&emsp;上级用户</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.childUserCount"
                      disabled>
              <template #prepend>下级用户数</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.isAuth"
                      disabled>
              <template #prepend>&emsp;是否实名</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.createdAt"
                      disabled>
              <template #prepend>&emsp;注册时间</template>

            </el-input>
          </div>

          <div class="title mt26 mb16">用户钱包</div>
          <div class="flex_sb">
            <el-input class="inputShow"
                      v-model="state.drawerData.cashMoney"
                      disabled>
              <template #prepend>
                <div style="width: 56px"
                     class="tac">&emsp;可提现</div>
              </template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.creditedMoney"
                      disabled>
              <template #prepend>
                <div style="width: 56px"
                     class="tac">&emsp;待入账</div>
              </template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.totalMoney"
                      disabled>
              <template #prepend>
                <div style="width: 56px"
                     class="tac">累计收益</div>
              </template>
            </el-input>
          </div>
          <div class="title mt26 mb16">平台日记</div>
          <div class="tabaleBox tabaleBoxDrawer">
            <el-table :data="state.tableData1"
                      style="width: 100%"
                      height="100"
                      v-loading="state.loading"
                      :header-cell-style="{ color: '#000' }">

              <el-table-column prop="status"
                               label="状态"
                               show-overflow-tooltip
                               align="center"
                               width="80" />
              <el-table-column prop="time"
                               label="时间"
                               show-overflow-tooltip
                               align="center"
                               width="170">
              </el-table-column>
              <el-table-column prop="company"
                               label="企业名称"
                               show-overflow-tooltip
                               align="center" />
              <el-table-column prop="position"
                               label="岗位名称"
                               show-overflow-tooltip
                               align="center">
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination background
                           v-model:current-page="state.paramsDrawer.pageNum"
                           v-model:page-size="state.paramsDrawer.pageSize"
                           :page-sizes="[10, 20, 30, 50]"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="state.paramsDrawer.totalSize"
                           @size-change="methods.handleSizeChangeDrawer"
                           @current-change="methods.handleCurrentChangeDrawer" />
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, toRefs, defineComponent, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const app = getCurrentInstance()?.proxy;
import { ElMessage, ElLoading } from "element-plus";
import area from "@/utils/area.js";

const router = useRouter();
const initState = () => {
  return {
    dialogVisible: false,
    drawerData: {},
    drawerId: '',
    paramsDrawer: {
      pageNum: 1,
      totalSize: 0,
      pageSize: 10,
    },
    loading: false,
    totalSize: 0,
    tableData: [
    ],
    params: {
      current: "",
      size: "",
      name: "",
      recommend: "",
      cityArr: "",
      positionTypeId: "",
      time: "",
      pageNum: 1,
      pageSize: 10
    },
    totalInputColumns: [
      { key: "nickName", label: "填写用户姓名/昵称", type: "input" },
      { key: "phone", label: "输入用户手机号", type: "input" },
      { key: "cityArr", label: "选择所在城市", type: "select" },
      { key: "positionTypeId", label: "选择期望职位", type: "select" },
      // { key: "inductionTime", label: "选择到职时间", type: "time" },
    ],
    totalInputColumnsOption: {
      cityList: [],
      positionTypeId: [],
      positionType: [],
    },
    props: {
      checkStrictly: true,
      label: "value",
      value: "value",
    },
    propsCity: [],
  };
};
const state = reactive(initState());
onMounted(() => {
  state.totalInputColumnsOption.positionType = JSON.parse(localStorage.getItem('positionType'))
  let city = []
  area.forEach((res, key) => {
    city.push({
      code: res.code,
      value: res.value,
      children: [],
    })
    res.children.forEach(res1 => {
      city[key].children.push({
        code: res1.code,
        value: res1.value,
      })
    })
  })
  state.propsCity = city;
  methods.getDataList();
});
const methods = {
  changeTree (data, index) {
    console.log(index);
    if (index.checkedKeys) {
      state.dialogData.checkedKeys = index.halfCheckedKeys.concat(
        index.checkedKeys
      );
    }
  },
  handleAction (type, data) {
    switch (type) {
      case "export": //导出
        app.$http
          .post(
            `userInfo/exportUsersea`, state.params,
            { responseType: "arraybuffer" }
          )
          .then((res) => {
            if (res) {
              app.$parse.downloadExcel(res, '公海池数据')
            }
          });
        break;
      case "QY": // 启用
        app.$get('/userInfo/forbiddenUserInfo?userInfoId=' + data.id + '&status=0').then(res => {
          if (res.code == 200) {
            ElMessage({ type: 'success', message: '操作成功' })
            methods.getDataList()
          } else {
            ElMessage({ type: 'error', message: res.message })
          }
        })
        break;
      case "PC": // 禁用
        app.$get('/userInfo/excludeUserInfo?userInfoId=' + data.id + '&excludeStatus=1').then(res => {
          if (res.code == 200) {
            ElMessage({ type: 'success', message: '操作成功' })
            methods.getDataList()
          } else {
            ElMessage({ type: 'error', message: res.message })
          }
        })
        break;
      case "JY": // 禁用
        app.$get('/userInfo/forbiddenUserInfo?userInfoId=' + data.id + '&status=1').then(res => {
          if (res.code == 200) {
            ElMessage({ type: 'success', message: '操作成功' })
            methods.getDataList()
          } else {
            ElMessage({ type: 'error', message: res.message })
          }
        })
        break;
      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.params = initState().params;
        break;
      case "detail"://详情
        app.$post('/userInfo/getUserInfoById?userInfoId=' + data.id).then(res => {
          if (res.data) {
            state.drawerData = res.data
          }
        })
        state.drawerId = data.id
        methods.getDataListDrawer()
        state.dialogVisible = true
        break;
      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除该招聘职位?", "删除招聘职位", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            app.$http.get("/positionTypeId/deleteById?id=" + data.id).then((res) => {
              methods.getDataList();
              ElMessage({
                type: "success",
                message: "已删除",
              });
            });
          })
          .catch(() => {
            methods.getDataList();
            ElMessage({
              type: "info",
              message: "已取消",
            });
          });

        break;
    }
  },
  getDataListDrawer () {

    app.$post('/userInfo/getUserPositionRecordList', {
      userInfoId: state.drawerId,
      pageNum: state.paramsDrawer.pageNum,
      pageSize: state.paramsDrawer.pageSize,
    }).then(res => {
      if (res.data) {
        state.tableData1 = res.data.list
        state.paramsDrawer.totalSize = res.data.total
      }
    })
  },
  //   授权数据
  getUserMenu () {
    app.$http
      .get("/sys/role/has/last/menu/byid?roleId=" + state.dialogData.data.id)
      .then((res) => {
        console.log(res);
        state.defaultCheckedNodes = res.data
      });
  },
  getDataList () {
    if (state.params.cityArr?.length) {
      state.params.resideProvinceId = state.params.cityArr[0];
      state.params.resideCityId = state.params.cityArr[1];
      state.params.resideAreaId = state.params.cityArr[2];
    } else {
      state.params.resideProvinceId = "";
      state.params.resideCityId = "";
      state.params.resideAreaId = "";
    }
    state.loading = true
    app.$http.post("/userInfo/search/usersea", state.params).then((res) => {
      if (res.data.list && res.code == 200) {
        state.tableData = res.data.list;
        state.totalSize = res.data.total;
      }
      state.loading = false
    }).catch(() => {
      state.loading = false
    })
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.appBox {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .tabaleBoxDrawer {
    ::v-deep(.el-table__inner-wrapper) {
      .el-table__cell {
        padding: 20px 0 !important;
      }
    }
  }

  ::v-deep(.el-drawer__title) {
    color: rgba(0, 121, 254, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-bold;
    font-weight: bold;
  }
  .drawerConcent {
    height: 100%;
    display: flex;
    flex-direction: column;
    .title {
      color: rgb(16, 16, 16);
      font-size: 16px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
    }
    .flex_sb {
      align-items: center;
      flex-wrap: wrap;
      .inputShow {
        margin-top: 16px;
        width: 48%;
        min-width: 260px;
      }
    }
  }
}
</style>
